<template>
	<view class="pages">
		<view class="bac"></view>
		<view class="mpouter">
			<map class="mp" :longitude="longitude" :latitude="latitude" scale="12"></map>
		</view>
		<view class="intro">
			<view class="hang1">
				<view>车百事汽车生活馆</view>
				<view>556m</view>
			</view>
			<view class="all">
				<view class="left">
					<view class="hang2">
						<view>⭐⭐⭐⭐</view>
						<view>4分</view>
					</view>
					<view class="hang3">营业时间： 周一至周五 早上8：00-晚上22：00</view>
					<view class="hang4">位置：山阳区人民路与解放路交叉口</view>
				</view>
				<view class="right">
					<image src="/static/Maintenance/store.png" mode="aspectFill" class="store-image"></image>
				</view>
			</view>
		</view>
		<view class="bottom">
			<button class="contact-btn" @click="callStore">联系门店</button>
			<button class="book-btn">立即预定</button>
		</view>
		
		<!-- 联系电话弹窗 -->
		<uni-popup ref="phonePopup" type="center" :mask-click="true" @maskClick="closePopup">
			<view class="phone-popup">
				<view class="phone-number">{{ phoneNumber }}</view>
				<view class="divider"></view>
				<view class="popup-btn-item" @click="copyPhone">
					<text class="popup-btn-text">复制</text>
				</view>
				<view class="divider"></view>
				<view class="popup-btn-item" @click="closePopup">
					<text class="popup-btn-text">取消拨号</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue';

	const latitude = ref(34.827055)
	const longitude = ref(113.55346)
	const phonePopup = ref(null)
	const phoneNumber = ref('18642589456') // 联系电话，可以根据实际情况修改
	
	// 打开弹窗
	const callStore = () => {
		phonePopup.value.open()
	}
	
	// 关闭弹窗
	const closePopup = () => {
		phonePopup.value.close()
	}
	
	// 复制电话号码
	const copyPhone = () => {
		uni.setClipboardData({
			data: phoneNumber.value,
			success: () => {
				uni.showToast({
					title: '已复制到剪贴板',
					icon: 'success'
				})
				closePopup()
			},
			fail: () => {
				uni.showToast({
					title: '复制失败',
					icon: 'none'
				})
			}
		})
	}

</script>

<style>
	.pages {
		background-color: white;
	}

	.bac {
		background-color: #2b85e4;
		height: 300rpx;
	}

	.mpouter {
		width: 90%;
		height: 960rpx;
		border-radius: 50rpx;
		background-color: white;
		margin-left: 40rpx;
		margin-top: -280rpx;

	}

	.mp {
		width: 90%;
		height: 900rpx;
		padding: 30rpx 35rpx;

	}

	.intro {
		background-color: white;
		margin: 30rpx 5% 0;
		padding: 35rpx 30rpx;
		border-radius: 25rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.hang1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18rpx;
	}

	.hang1 view:nth-child(1) {
		font-weight: bold;
		font-size: 36rpx;
		color: #333;
		line-height: 1.2;
	}

	.hang1 view:nth-child(2) {
		font-weight: 500;
		font-size: 26rpx;
		color: #4A90E2;
	}

	.hang2 {
		display: flex;
		align-items: center;
		margin-top: 8rpx;
		margin-bottom: 18rpx;
	}

	.hang2 view:nth-child(1) {
		font-size: 26rpx;
		margin-right: 10rpx;
	}

	.hang2 view:nth-child(2) {
		font-size: 24rpx;
		color: #333;
	}

	.hang3,
	.hang4 {
		font-size: 20rpx;
		color: #666;
		margin: 10rpx 0;
		line-height: 1.6;
	}

	.all {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.left {
		flex: 1;
	}

	.right {
		margin-left: 20rpx;
	}

	.store-image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 12rpx;
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
		margin: 30rpx 5% 40rpx;
	}

	.contact-btn,
	.book-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
	}

	.contact-btn {
		background-color: #2b85e4;
	}

	.book-btn {
		background-color: #ff6b6b;
	}
	
	/* 弹窗样式 */
	.phone-popup {
		width: 600rpx;
		background-color: white;
		border-radius: 20rpx;
		overflow: hidden;
	}
	
	.phone-number {
		text-align: center;
		font-size: 56rpx;
		font-weight: bold;
		color: #333;
		padding: 50rpx 40rpx 40rpx;
	}
	
	.divider {
		height: 1rpx;
		background-color: #e5e5e5;
		margin: 0;
	}
	
	.popup-btn-item {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: white;
	}
	
	.popup-btn-item:active {
		background-color: #f5f5f5;
	}
	
	.popup-btn-text {
		font-size: 32rpx;
		color: #333;
	}

</style>